<template>
  <div class="bg-white rounded shadow-sm p-6 mt-6">
    <h2 class="text-lg font-medium text-gray-800 mb-4">相似候选人推荐</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div 
        v-for="candidate in similarCandidates"
        :key="candidate.id"
        class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
        @click="viewCandidate(candidate.id)"
      >
        <div class="flex items-center mb-3">
          <div class="w-12 h-12 rounded-full overflow-hidden mr-3">
            <img :src="candidate.avatar" :alt="candidate.name" class="w-full h-full object-cover">
          </div>
          <div>
            <h3 class="font-medium text-gray-800">{{ candidate.name }}</h3>
            <div class="text-sm text-gray-500">{{ candidate.currentPosition }} · {{ candidate.currentCompany }}</div>
          </div>
        </div>
        <div class="text-sm text-gray-600 mb-3">
          {{ candidate.profile.substring(0, 100) }}...
        </div>
        <div class="flex items-center justify-between text-sm">
          <div class="text-gray-500">匹配度: <span class="text-primary font-medium">{{ candidate.matchRate }}%</span></div>
          <button class="text-primary hover:underline">查看详情</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useCandidatesStore } from '../stores/candidates'

interface Props {
  currentCandidateId: string
}

const props = defineProps<Props>()

const router = useRouter()
const candidatesStore = useCandidatesStore()

const similarCandidates = computed(() => {
  // Mock similar candidates data
  return [
    {
      id: 'similar-1',
      name: '戴佳琪',
      currentPosition: '市场总监',
      currentCompany: '安克创新',
      avatar: '/placeholder.svg?height=100&width=100',
      profile: '10年整合营销经验，甲乙方经验，有创业经验，阿里拼多国内外的营销经验，熟悉国内外批发市场',
      matchRate: 92
    },
    {
      id: 'similar-2',
      name: '李志远',
      currentPosition: '营销副总裁',
      currentCompany: '荣耀科技',
      avatar: '/placeholder.svg?height=100&width=100',
      profile: '12年消费电子行业营销经验，擅长品牌策略和数字营销，曾主导多个重大产品发布会和营销活动',
      matchRate: 88
    },
    {
      id: 'similar-3',
      name: '张雨晴',
      currentPosition: '市场总监',
      currentCompany: 'OPPO',
      avatar: '/placeholder.svg?height=100&width=100',
      profile: '8年手机行业营销经验，擅长社交媒体营销和KOL合作，曾负责多个爆款产品的营销策划',
      matchRate: 85
    }
  ]
})

const viewCandidate = (candidateId: string) => {
  router.push(`/candidate/${candidateId}`)
}
</script>
